<template>
	<div class="app-container">
		<div class="bgWhite radius8">
			<el-form class="p20 flex col-top row-between" style="padding-bottom: 0;" label-width="100px"
				:model="queryParams" ref="queryForm" :inline="true">
				<div>
					<el-form-item label="所属部门" prop="deptId">
						<el-tree-select size="large" 
						v-model="queryParams.deptId" 
						:data="deptOptions" :props="{
						   value: 'deptId',
						   label: 'deptName',
						   children: 'children',
						}" placeholder="请选择" 
						check-strictly
						value-key="deptId" style="width: 200px;" />
					</el-form-item>
					<el-form-item label="人员选择" prop="userId">
						<el-select v-model="queryParams.userId" placeholder="请选择" size="large" style="width: 200px">
							<el-option v-for="dict in teamOptions" :key="dict.userId" :label="dict.userName"
								:value="dict.userId" />
						</el-select>
					</el-form-item>
					<el-form-item label="日期选择" prop="sTime">
						<datePickerRange ref="clearPicker" @dateRangeValue="changeTime"></datePickerRange>
					</el-form-item>
				</div>
				<el-form-item style="margin-right: 0">
					<div class="flex col-center row-end">
						<el-button class="searchBtn" type="defaultBtn" @click="handleQuery">查询</el-button>
						<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="bgWhite radius8 p20 mt25">
			<div class="flex col-center row-between mb20">
				<div>
					<span class="fb fs16">员工业绩列表</span>
				</div>
				<div>
					<el-dropdown class="mr20" split-button type="" @command="handleRank">
						<span @click="rankFunc()">
							排序
							<img v-if="queryParams.orderValue == 'asc'" src="@/assets/images/rank.png" class="mr5" style="width: 10px;" alt=""/>
							<img v-else src="@/assets/images/rank1.png" class="mr5" style="width: 10px;" alt="" />
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item command="customerAdd">客户新增</el-dropdown-item>
								<el-dropdown-item command="followUpAdd">新增跟进</el-dropdown-item>
								<el-dropdown-item command="conversionRate">转化率</el-dropdown-item>
								<el-dropdown-item command="customerTrading">成交客户</el-dropdown-item>
								<el-dropdown-item command="orderAdd">新增订单</el-dropdown-item>
								<el-dropdown-item command="orderTotalAmount">成交金额</el-dropdown-item>
								<el-dropdown-item command="orderReceivedAmount">回款金额</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
					<el-button type="defaultBtn" @click="handleExport" v-hasPermi="['performance:export']">
						导出
					</el-button>
				</div>
			</div>
			<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
					background: '#FAFAFA',
					color: '#0C1019',
					height: '54px',
				  }" 
				:cell-style="{ height: '54px' }"
				@selection-change="handleSelectionChange"
				:summary-method="getSummaries" show-summary
				>
				<!-- <el-table-column type="selection" width="55" align="center" />  -->
				<el-table-column label="姓名" align="center" prop="userName" />
				<el-table-column label="所属部门" align="center" prop="deptName" />
				<el-table-column label="新增客户" align="center" prop="customerAdd" />
				<el-table-column label="新增跟进" align="center" prop="followUpAdd" />
				<el-table-column label="转化率" align="center" prop="conversionRate" />
				<el-table-column label="成交客户" align="center" prop="customerTrading" />
				<el-table-column label="新增订单" align="center" prop="orderAdd" />
				<el-table-column label="成交金额" align="center" prop="orderTotalAmount" />
				<el-table-column label="回款金额" align="center" prop="orderReceivedAmount" />
			</el-table>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
				v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>
	</div>
</template>

<script setup name="ProductSetup">
	import {
		userPerformancePage, //列表
	} from "@/api/business/performance";
	import {
		getUserListData //查业务经理
	} from "@/api/business/teamOpportunity";
	import {
		listDept, //査部门
	} from "@/api/system/dept";
</script>
<script>
	export default {
		data() {
			return {
				loading: true, // 遮罩层
				total: 0, // 总条数
				list: [], // 表格数据
				deptOptions: [], //部门
				teamOptions: [], //人员
				time: '',
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					userId: '', //用户id
					deptId: '', //部门id
					sTime: '', //开始时间
					eTime: '', //结束时间
					orderKey: 'customerAdd', //默认客户新增
					orderValue: 'asc', //asc升序 desc降序
				}, //查询参数
				ids: [],
				multiple: true,
				rank:true
			}
		},
		created() {
			this.getList(1)
		},
		methods: {
			getSummaries(param) {
				const { columns, data } = param;
				const sums = [];
				columns.forEach((column, index) => {
				  const values = data.map(item => Number(item[column.property]));
				  if (!values.every(value => isNaN(value)) && index > 1 && index != 4) {
					sums[index] = values.reduce((prev, curr) => {
					  const value = Number(curr);
					  if (!isNaN(value)) {
						return (prev*1 + curr*1).toFixed(2);
					  } else {
						return (prev*1).toFixed(2);
					  }
					}, 0);
					let unit = ''
					switch (index){
						case 2:
							unit = ' 位'
							break;
						case 3:
							unit = ' 个'
							break;	
						case 5:
							unit = ' 位'
							break;	
						case 6:
							unit = ' 单'
							break;
						case 7:
							unit = ' 元'
							break;
						case 8:
							unit = ' 元'
							break;			
						default:
							break;
					}
					sums[index] += unit;
				  } 
				});
				return sums;
			},
			changeTime(e) {
				this.queryParams.sTime = e[0] + ' ' + '00:00:00'
				this.queryParams.eTime = e[1] + ' ' + '23:59:59'
			},
			//查询列表
			getList(num) {
				this.loading = true;
				userPerformancePage(this.queryParams).then((response) => {
					this.list = response.rows;
					this.total = response.total;
					this.loading = false;
					if (num == 1) {
						this.getUserList()
					}
				});
			},
			// 获取业务经理
			getUserList() {
				//获取自己和同部门的用户信息
				getUserListData().then(response => {
					this.teamOptions = response.data;
					this.getWorkList()
				});
			},
			// 获取部门
			getWorkList() {
				listDept().then((response) => {
					this.deptOptions = this.handleTree(response.data, "deptId");
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.$refs.clearPicker.clearPickerValue()
				this.queryParams.sTime = ''
				this.queryParams.eTime = ''
				this.resetForm("queryForm");
				this.handleQuery();
			},
			//新增
			handleAdd() {
				this.detail = ''
				this.ids = []
				this.selectUserIds = []
				this.$refs.dialogStatus.open()
				this.$forceUpdate()
			},
			// 排序
			rankFunc(){
				this.rank = !this.rank
				this.queryParams.orderValue = this.rank == true ? 'asc' :'desc'
				this.getList()
				this.$forceUpdate()
			},
			// 排序
			handleRank(e) {
				this.queryParams.orderKey = e
				this.getList()
			},
			// 导出
			handleExport() {
				let that = this
				// this.queryParams.userId = this.ids.join(',')
				this.download(
					"/performance/exportUserPerformance", {
						...this.queryParams,
					},
					`UserPerformance_${new Date().getTime()}.xlsx`
				);
			},
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.userId);
				this.multiple = !selection.length;
			},
		}
	}
</script>